<!--
    * Time    : 2021-03-16 10:23:11
    * Author  : zhangTj
    * Desc    : tap页面 - 结果组件
-->

<template>
    <div class="font-14">
        <p class="mb-1 text-999">以下是当前调研结果</p>
        <template v-for="item in summaryList">
            <!-- 文本选项 -->
            <div v-if="item.type == 'textSelect'" :key="item.uuid" class="bg-fff rounded-8 p-15p mb-1">
                <p class="text-center mb-15p">{{ item.title }}</p>
                <div v-for="(ops, index) in Object.keys(item.statisticsMap)" :key="index" class="d-flex flex-column mb-2">
                    <span class="mb">{{ ops }}</span>
                    <div>
                        <Progress
                            :percentage="((item.statisticsMap[ops] / item.totalStatisticsQuantity) * 100).toFixed(2)"
                            :color="index % 2 == 0 ? '#4eae31' : '#F1C40F'"
                            style="width: 88%"
                        />
                    </div>
                </div>
            </div>

            <!-- 图片选项 -->
            <div v-else-if="item.type == 'photoSelect'" :key="item.uuid" class="bg-fff rounded-8 p-15p mb-1">
                <p class="text-center mb-15p">{{ item.title }}</p>
                <div v-for="(ops, index) in Object.keys(item.statisticsMap)" :key="index" class="d-flex a-center mb-2">
                    <img
                        @click="previewImg(toList(ops))"
                        style="width: 50px; height: 50px; object-fit: contain"
                        :src="$imgUrlHead + toList(ops)[0]"
                        alt=""
                    />
                    <div class="flex-1 ml-1">
                        <Progress
                            :percentage="((item.statisticsMap[ops] / item.totalStatisticsQuantity) * 100).toFixed(2)"
                            :showText="false"
                            :color="index % 2 == 0 ? '#4eae31' : '#F1C40F'"
                            style="width: 90%"
                        />
                        <p class="text-999 mt font-12">{{ ((item.statisticsMap[ops] / item.totalStatisticsQuantity) * 100).toFixed(2) }}%</p>
                    </div>
                </div>
            </div>
        </template>

        <Noempty v-if="!summaryList || (summaryList && !summaryList.length)" :pic="require('@/assets/images/personal-no-good.png')" title="暂无统计数据结果" />
    </div>
</template>

<script>
import Progress from '@/components/Progress/Progress'
import { questionnaireApi } from '@/api/questionnaire'
import { ImagePreview } from 'vant'
import Noempty from '@/components/Noempty/Noempty'

export default {
    name: 'TapResult',
    components: { Progress, Noempty },
    props: {
        questionnaireId: {
            type: Number | String,
            required: true
        }
    },
    data() {
        return {
            summaryList: [] // 汇总结果列表
        }
    },
    computed: {},
    watch: {},
    created() {},
    destroyed() {},
    mounted() {
        this.getSummary()
    },
    methods: {
        // 获取汇总结果
        getSummary() {
            questionnaireApi
                .questionnaireStatisticalResults({
                    id: this.questionnaireId
                })
                .then((res) => {
                    if (!res.success) return void this.$toast(res.msg)

                    this.summaryList = res.result
                    this.$emit('loadSuccess', this.summaryList)
                })
                .catch((err) => {
                })
        },

        // 变成数组
        toList(item) {
            return eval(item)
        },

        // 预览图片
        previewImg(picList) {
            ImagePreview(picList.map((item) => this.$imgUrlHead + item))
        }
    }
}
</script>

<style lang="scss" scoped></style>
